﻿<!DOCTYPE HTML>

<html>
	<head>
		<title>私たちの愛</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="assets/css/main.css" />
		<link href="musicAPI/bootstrap.min.css" rel="stylesheet">
		<style>
			.btn{margin-right:15px;}
			textarea{min-height:150px; }
			.center-block {
			 display: block;
			 margin-left: auto;
			 margin-right: auto;
			}
			.element {
		 	      .center-block();
			}
		</style>
		
	</head>
	<body class="is-preload">
        
		<!-- Header -->
			<header id="header">
				<div class="inner">
					<a href="#" class="image avatar"><img src="images/avatar.jpg" alt="" /></a>
					<h1><strong>I am 小baby</strong>, a Kawaī girl<br />
					This is my personal blog about love.<br />
					crafted by ZhuHao.</h1>
				</div>
			</header>

		<!-- Main -->
			<div id="main">
			
				<!-- music -->
				<div class="container">
					<div class="center-block">
						<div id="aplayer" class="aplayer"></div>
					</div>
				</div>			

				<!-- One -->
					<section id="one">
						<header class="major">
							<h2>这里记录着我们的生活<br />
							充满了爱和浪漫。</h2>
						</header>
						<h2>Save The Date</h2>
                        <span id="showtime" style="font-size: 28px;">Save the date</span>  
						<ul class="actions" >
							<li style="margin-top: 30px;"><a href="#" class="button">Growing......</a></li>
						</ul>
					</section>
					
					<!-- Two -->
					<section id="">
						<h2>ONE · 一个</h2>
						<div id="date" style="text-align: center;"></div>
						<img src="" id="img" style="height: auto;width: auto;max-height: 100%;max-width: 100%;"/>
						<div style="margin-top: 10px;">
							<div id="vol" style="float: left;"></div>
							<div id="img_author" style="float: right;"></div>
						</div>
						<div id="word" style="clear: both;margin-top: 10px;"></div>
						<div id="word_from" style="float: right;"></div>
						<div style="clear: both;"></div>
					</section>

				<!-- Three -->
					<section id="two">
						<h2>Memory of love</h2>
						<div class="row">
							<article class="col-6 col-12-xsmall work-item">
								<a href="images/fulls/01.jpg" class="image fit thumb"><img src="images/thumbs/01.jpg" alt="" /></a>
								<h3>我们是不是很配</h3>
								<p>拍摄于江苏省，无锡市，锡山区，2018.07.30</p>
							</article>
							<article class="col-6 col-12-xsmall work-item">
								<a href="images/fulls/02.jpg" class="image fit thumb"><img src="images/thumbs/02.jpg" alt="" /></a>
								<h3>我是不是很漂亮</h3>
								<p>拍摄于江苏省，无锡市，锡山区，2018.07.30</p>
							</article>
							<article class="col-6 col-12-xsmall work-item">
								<a href="images/fulls/03.jpg" class="image fit thumb"><img src="images/thumbs/03.jpg" alt="" /></a>
								<h3>偷偷去找他，哈哈</h3>
								<p>拍摄于江苏省，苏州市，常熟市，2018.03.27</p>
							</article>
							<article class="col-6 col-12-xsmall work-item">
								<a href="images/fulls/04.jpg" class="image fit thumb"><img src="images/thumbs/04.jpg" alt="" /></a>
								<h3>好想就这么一直的靠在他的肩上</h3>
								<p>拍摄于江苏省，苏州市，虎丘区，2017.09.30</p>
							</article>
							<article class="col-6 col-12-xsmall work-item">
								<a href="images/fulls/05.jpg" class="image fit thumb"><img src="images/thumbs/05.jpg" alt="" /></a>
								<h3>我就是喜欢笑的男生</h3>
								<p>拍摄于浙江省，杭州市，上城区，2018.04.30</p>
							</article>
							<article class="col-6 col-12-xsmall work-item">
								<a href="images/fulls/06.jpg" class="image fit thumb"><img src="images/thumbs/06.jpg" alt="" /></a>
								<h3>西湖边上，美景配佳人</h3>
								<p>拍摄于浙江省，杭州市，西湖区，2018.04.30</p>
							</article>
						</div>
						<ul class="actions">
							<li><a href="#" class="button">More Photos</a></li>
						</ul>
					</section>

		<!-- Footer -->
			<footer id="footer">
				<div class="inner">
					<ul class="icons">
						<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
						<li><a href="#" class="icon fa-github"><span class="label">Github</span></a></li>
						<li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
						<li><a href="#" class="icon fa-envelope-o"><span class="label">Email</span></a></li>
					</ul>
					<ul class="copyright">
						<li>&copy; 私たちの愛</li><li>Design: ZhuHao</li>
					</ul>
				</div>
			</footer>

		<!-- Scripts -->
			<script src="assets/js/jquery.min.js"></script>
			<script src="assets/js/jquery.poptrox.min.js"></script>
			<script src="assets/js/browser.min.js"></script>
			<script src="assets/js/breakpoints.min.js"></script>
			<script src="assets/js/util.js"></script>
			<script src="assets/js/main.js"></script>
			<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
			<script src="musicAPI/bootstrap.min.js"></script>
                     		<script src="musicAPI/APlayer.min.js"></script>
			<script type="text/javascript">
				var music = new Array();
				$.ajax({
				    type: "POST",
				    url: 'https://api.hibai.cn/api/index/index',
				    dataType: 'json',
				    data: {"TransCode":"020112","OpenId":"123456789","Body":{"SongListId":"379264613"}},
				    success: function(result){
					var ap = new APlayer({
					    element: document.getElementById('aplayer'),
					    narrow: false,
					    autoplay: true,
					    showlrc: 3,
					    mutex: true,
					    theme: '#e6d0b2',
					    mode: 'circulation',
					    preload: 'metadata',
					    listmaxheight: '165px',
					    music: result.Body
					});
	    		}
			});
			</script>
			<script type="text/javascript">
				$.ajax({
				    type: "POST",
				    url: 'https://api.hibai.cn/api/index/index',
				    dataType: 'json',
				    data: {"TransCode":"030111","OpenId":"123456789","Body":{"SongListId":"123456789"}},
				    success: function(result){
						$("#vol").html("<a href='"+result.Body.url+"'><p>"+result.Body.vol+"</p></a>");
						$("#img").attr("src",result.Body.img_url);
						$("#img_author").html("<p>"+result.Body.img_kind+" | "+result.Body.img_author+"</p>");
						$("#word").html("<h4 style='line-height: 30px;'>"+result.Body.word+"</h4>");
						$("#date").html("<h4>"+result.Body.date.substring(0,10)+"</h4>");
						$("#word_from").html("<p>————"+result.Body.word_from+"</p>");
	    			}
				});
			</script>
			<script language="javascript">  
			function show_date_time(){  
				window.setTimeout("show_date_time()", 1000);
				BirthDay=new Date("05/01/2013 00:00:00");//这个日期是可以修改的
				today=new Date(); 
				timeold=(today.getTime()-BirthDay.getTime());  
				sectimeold=timeold/1000;  
				secondsold=Math.floor(sectimeold);  
				msPerDay=24*60*60*1000;  
				e_daysold=timeold/msPerDay;  
				daysold=Math.floor(e_daysold);  
				e_hrsold=(e_daysold-daysold)*24;  
				hrsold=Math.floor(e_hrsold);  
				e_minsold=(e_hrsold-hrsold)*60;  
				minsold=Math.floor((e_hrsold-hrsold)*60);  
				seconds=Math.floor((e_minsold-minsold)*60); 
				showtime.innerHTML="我们已经陪伴彼此："+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";  
}  
show_date_time();  
</script>  
	</body>
</html>